<template>
  <div>
    <header-nav />
    <div class='video'>
      <video :src="articleInfo.content" :poster='articleInfo.img' controls></video>
    </div>
    <div class='user-info'>
      <p class='title'>
        <span>
          <van-icon name="fire" /> {{articleInfo.category.title}} </span>
        <span>{{articleInfo.name}} </span>
      </p>
      <p>
        <span>
          {{articleInfo.userinfo.name}} </span>
        <span class='gy'> 47.6万观看</span>
        <span class='gy'> 3226丹麦</span>
        <span class='gy'> {{articleInfo.date}}</span>
      </p>
      <p>
        <span @click='onCollected'>
          <van-icon name="star-o" />收藏
        </span>
        <span>
          <van-icon name="down" />缓存
        </span>
        <span>
          <van-icon name="share" /> 分享</span>

      </p>
    </div>
    <div class='recommed'>
      <p>
        推荐
      </p>
      <channel-item :item="v" v-for='(v,index) in  recommedList ' :key="index" />
    </div>
    <div class='comment'>
      <p>
        全部评论
      </p>

    </div>
  </div>
</template>
<script>
import HeaderNav from '@/components/header-nav/'
import ChannelItem from '@/views/home/components/channel-item.vue'
import { getArticle, getdetail } from '@/api/channel.js'
import { collected } from '@/api/article.js'
import { mapState } from 'vuex'
export default {
  name: 'articleIndex',
  components: {
    HeaderNav,
    ChannelItem
  },
  props: {
    articleId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      articleInfo: null,
      recommedList: []
    }
  },
  created() {
    this.loadArticle()
  },
  computed: {
    ...mapState(['profile'])
  },
  methods: {
    async loadArticle() {
      const { data: res } = await getArticle(this.articleId)
      console.log(res)
      this.articleInfo = res[0]
      this.loadRecommedList()
    },
    async loadRecommedList() {
      const { data: res } = await getdetail(this.articleInfo.category._id, {
        page: 1,
        pagesize: 10
      })
      this.recommedList.push(...res)
    },
    async onCollected() {
      const { data } = await collected(this.profile.id, { article_id: this.articleId })
      console.log(data)
    }
  }
}
</script>
<style lang="less" scoped>
.video {
  width: 100%;
  height: 210px;
  video {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
}
.user-info {
  padding: 14px;
  background-color: #ffffff;
  .title {
    font-size: 16px;
    span:nth-child(1) {
      color: #fb7299;
      font-size: 14px;
      margin-right: 10px;
      background-color: #f2f3f5;
      height: 16px;
      line-height: 16px;
      border-radius: 5px;
    }
  }
  p:nth-child(2) {
    font-size: 12px;
    margin-top: 8px;
    padding: 0 0 0 10px;
    span {
      margin-right: 8px;
    }
  }
  p:nth-child(3) {
    padding: 0 0 0 10px;
    font-size: 14px;
    margin-top: 8px;
    span {
      display: inline-block;
      height: 24px;

      margin-right: 10px;
    }
    .van-icon {
      vertical-align: middle;
      font-size: 20px;
      line-height: 20px;
      margin-right: 3px;
    }
  }
}
.gy {
  color: #d6d6d6;
}
.recommed {
  padding: 0 5px;
  p {
    font-size: 16px;
    margin: 8px 0;
  }
  > div {
    display: inline-block;
  }
}

.comment {
  padding: 0 5px;
  p {
    font-size: 16px;
    margin: 8px 0;
  }
}
</style>
